<!DOCTYPE html>
<html><head>
		<meta charset="utf-8">
		<title>关于我</title>
<!--/*背景和整体CSS*/-->
		<style>
			body{margin: 0;padding: 0;}
			html{background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);background-repeat: no-repeat;background-size:100% 100%;background-attachment: fixed;}
		</style>
<script src="../js/js.js" type="text/javascript"></script>			
<!--/*主体部分CSS*/-->
<script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
/* 整体动画 */
			
@keyframes entry {
	0% {
	top:-20%;
	opacity:0.1;
}
100% {
	top:0%;
}
}.wrapper {
	position:absolute;
	top:30%;
	left:40%;
	width:300px;
	height:500px;
	perspective:900px;
}
	.wrapper a{color:black;}	
.container {
	position:absolute;
	top:0%;
	width:100%;
	height:100%;
	transition:.5s all ease;
	transform:rotateX(60deg) scale(0.7);
	perspective:900px;
	box-shadow:0px 20px 50px #555;
	animation:entry 1s linear 1;
	font-size: 90px;
	text-align: center;
	border-radius: 50px;
	border: 3px solid #000000;
}
#c0 {
	position:absolute;
	top:0%;
	width:100%;
	height:100%;
	z-index:300;
	background-image: -webkit-linear-gradient(top right, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	background-image: -o-linear-gradient(top right, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	background-image: linear-gradient(to bottom left, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	box-shadow:0px 20px 100px #555;
	left:0;
}
#c1 {
	background-image: -webkit-linear-gradient(top right, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	background-image: -o-linear-gradient(top right, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	background-image: linear-gradient(to bottom left, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	box-shadow:0px 20px 100px #555;
	left:100%;
	z-index:0;
}
#c2 {
	left:-100%;
	z-index:0;
	background-image: -webkit-linear-gradient(top right, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	background-image: -o-linear-gradient(top right, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	background-image: linear-gradient(to bottom left, #FF3CAC 0%, #562B7C 52%, #2B86C5 100%);
	box-shadow:0px 20px 100px #555;
}
.container:hover {
	cursor:pointer;
	transform:rotate(0deg) scale(1) translateY(10px);
	transition:.5s all ease;
	z-index:400;
}
</style>

<!--/*目录和LOGO部分*/-->
	<link rel="stylesheet" href="../css/header.css" type="text/css">
			
<!--/*页脚部分css	*/-->
	<link rel="stylesheet" href="../css/footer.css" type="text/css">
	
	</head>
	<body>
<!--导航栏与logo部分-->
		<header>
    <div class="navbar-container">
        <!-- 左边图标和logo -->
        <div class="navbar-left">
            <a href="../index.html"><img src="../images/logo.png" class="img1"></a>
            <h1 class="h1">关于我</h1><br/>
            <span class="h2">About Mr.uh</span>
        </div>
     <div class="navbar-morebox">
            <button class="more-btn">
            <img src="../images/more.png" alt="">
            </button>
        </div>
        <!-- 导航菜单-->
        <ul class="navbar-list">
            <li class="navbar-item"><a href="/">首页</a></li>
            <li class="navbar-item"><a href="/Experiment" target="_blank">Experiment</a></li>
            <li class="navbar-item"><a href="/musicdomo" target="_blank">小domo</a></li>
            <li class="navbar-item"><a href="/personal" target="_blank">个人作品</a></li>
            <li class="navbar-item"><a href="/about" target="_blank">关于我</a></li>
        </ul>
        <!-- 搜索框 -->
        <!-- 搜索框 -->
        <div class="navbar-search">
        <form action="http://www.baidu.com/s" method="get">
            <input type="text" class="search" placeholder="百度一下，你就知道" name="w" >
            <button class="search-btn">
                <img src="../images/search.png">
            </button>
        </form>
        </div>
        <!-- 更多按钮 -->
        <!--小屏幕显示 -->

    </div>
    <!-- 手机或平板屏幕显示 -->
    <ul class="small-list" id="small-list">
        <li class="small-item"><a href="../index.html">首页</a></li>
        <li class="small-item"><a href="Experiment.html">Experiment</a></li>
        <li class="small-item"><a href="domo.html">小domo</a></li>
        <li class="small-item"><a href="personal space.html">个人作品</a></li>
        <li class="small-item"><a href="about me.html">关于我</a></li>
        <li class="small-item">
        <form action="http://www.baidu.com/s" method="get">
            <input type="text" class="search" placeholder="百度一下，你就知道" name="w" >
            <button class="search-btn">
                <img src="../images/search.png">
            </button>
        </form>
        </li>
    </ul>
	</header>
		
<!--主体部分-->
	<main>
	<div style="height: 1000px;">
		<div class="wrapper">  
			<a href="http://129.211.81.82:8080/"><div class="container" id="c0">

			留<br/>
			言<br/>
			板<br/>
			！<br/>
			</div></a>
			<a href="404.html"><div class="container" id="c1">
			4<br/>
			0<br/>
			4<br/>
			<br/>
			</div></a>
			<a href="404.html"><div class="container" id="c2">
			4<br/>
			0<br/>
			4<br/>
			<br/>
			</div></a>
		</div>
		
	</div>
	</main>	
		
<!--页脚部分-->
		<footer><div class="footer">
		<a href="../index.html">Home</a> | <a href="#">Terms of Use</a> | <a href="#">FAQs</a> | <a href="#">About Us</a> | <a href="#">Contact Us</a><br />
        Copyright © 2019 <a href="#"> cth1688 </a> | Designed by <a href="../index.html" target="_blank">www.cth1688.cn</a>
		</div></footer>
	</body>
</html>
